<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多层表头</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->

</head>
<body>
  <div class="page_content">
	<div id="maingrid"></div>
  </div>
<script type="text/javascript">
		 var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"col1":"塑胶部","col3":"435.88","col4":"674.11","col5":"64.66%","col6":"265.88","col7":"374.11","col8":"71.07%"},
      {"col1":"化纤部","col3":"996.30","col4":"811.76","col5":"122.73%","col6":"546.30","col7":"611.76","col8":"89.30%"},
      {"col1":"帘子部","col3":"855.99","col4":"945.88","col5":"90.50%","col6":"656.30","col7":"458.33","col8":"143.19%"},
      {"col1":"总公司","col3":"811.25","col4":"658.33","col5":"123.23%","col6":"671.25","col7":"858.33","col8":"78.20%"},
      {"col1":"总计","col3":"3099.42","col4":"3090.08","col5":"100.30%","col6":"2139.73","col7":"2302.53","col8":"92.93%"},
      {"col1":"是否完成指标","col3": {value:"<span style='color:#2da9fa;'>已完成<span>", cols:3},"col6":{value:"<span class='red'>未完成</span>", cols:3}}
      ]}
       

       //数据表格
    var g;
        
     function initComplete(){
       g = $("#maingrid").quiGrid({
                columns: [ 
                  { display: '部门', name: 'col1',width: 150},
                  { display: '利润总额', columns: [
                    { display: '实际', name: 'col3', width: 100 },
                    { display: '指标', name: 'col4', width: 100 },
                    { display: '完成率', name: 'col5', width: 100, render: function(rowdata, rowindex, value, column){
                       return pertonum(value)>100 ? "<span style='color:#2da9fa;'>" + value + "</span>" : "<span class='red'>" + value + "</span>";
                      }}
                    ]},
                  { display: '净利润', columns: [
                    { display: '实际', name: 'col6', width: 100 },
                    { display: '指标', name: 'col7', width: 100 },
                    { display: '完成率', name: 'col8', width: 100, render: function(rowdata, rowindex, value, column){
                       return pertonum(value)>100 ? "<span style='color:#2da9fa;'>" + value + "</span>" : "<span class='red'>" + value + "</span>";
                      }} 
                    ]}
                ], 
                data:testData, 
                pageSize: 10, sortName: 'name',
                height: 'auto', width:755,multihead:true,usePager:false,rownumbers:false,checkbox:false,multiBody:true,hideScrollerX:true
            });
    }
    function pertonum(stringObj){
      var newstr=stringObj.replace(/%/, "");
      return Number(newstr);
    }

          
    </script>		
</body>
</html>